<template>
  <div class="dep">
    <!-- <div class="dep-box">
      <Input
        clearable
        v-model="searchValue"
        :placeholder="$t('common.inputNodeInfo')"
        style="width: 100%"
        @on-enter="searchHandler"
        @on-clear="searchHandler"
      >
        <Icon type="ios-search" @click="searchHandler" slot="suffix" />
      </Input>
      <div class="dep-box--wrap">
        <el-tree
          :data="treeList"
          :props="treeProps"
          highlight-current
          :default-expanded-keys="[0]"
          node-key="orgId"
          @node-click="onSelectChange"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span
        class="dep-box--info"
      >{{$t('common.selected')}}：{{current.nodeName? " "+current.nodeName + '( '+ current.code +')' : ''}}</span>
    </div>-->
    <user-organization
      :query="query"
      @handleOnNodeClick="handleOnNodeClick"
      @selsectOrg="selsectOrg"
    ></user-organization>
  </div>
</template>

<script>
import UserOrganization from "@/components/common/UserOrganization.vue";
import { getTreeList, findEmployeeList, findTreeNode, filterTree } from "@/api/treeApi";

export default {
  name: "SelectDepBridge",
  components: {
    UserOrganization
  },
  data: () => ({
    current: {},
    treeProps: {
      label: "orgName",
      children: "childrenDept"
    },
    query: {
      orgPath: "",
      orgTypeFilter: 3,
      enabled: ""
    }
  }),
  props: {
    nodeCode: {
      type: String,
      default: window.RPConfig.node_code
    },
    successHandler: {
      type: Function,
      default: _ => _
    }
  },
  computed: {
    actions() {
      const vm = this;
      return [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => vm.successHandler(vm.current, vm),
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => this.$emit("Close")
        }
      ];
    }
  },
  created() {
    this.$emit("SetTitle", this.$t("common.selectDeparment"));
    this.$emit("SetPageWidth", 734);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    handleOnNodeClick(data) {
      this.current = { code: data.orgCode, orgId: data.orgId, nodeName: data.orgName };
    },
    selsectOrg(data) {
      this.current = { code: data.orgCode, orgId: data.orgId, nodeName: data.orgName };
    }
  }
};
</script>
<style lang="less">
.dep {
  height: 406px;
  &-box {
    width: 100%;
    height: 100%;
    // overflow-y: scroll;
    &--wrap {
      height: 377 - 32px;
      overflow-y: auto;
      margin-top: 10px;
    }
    &--info {
      line-height: 28px;
    }
  }
}
</style>
